<template>
    <div class="ratingselect">
        <div class="rating-type">
            <span class="block positive" @click="select(2)"
            :class="{'active':selectType===2}">{{desc.all}}<span class="count">{{ratings.length}}</span></span>
            <span class="block positive" @click="select(0)"
            :class="{'active':selectType===0}">{{desc.positive}}<span class="count">{{positives.length}}</span></span>
            <span class="block negative " @click="select(1)"
            :class="{'active':selectType===1}">{{desc.negative}}<span class="count">{{negatives.length}}</span></span>
        </div>
        <div @click="toggleContent" class="switch" :class="{'on':onlyContent}">
            <span class="icon-check_circle"></span>
            <span class="content">只看有内容的评价</span>
        </div>
    </div>

</template>
<script>
const POSITIVE = 0
const NEGATIVE = 1
const ALL = 2
export default {
    props:['ratings','selectType','onlyContent','desc'],
    methods : {
        select(type){
            this.$parent.selectType = type
        },
        toggleContent(){
            this.$parent.onlyContent = !this.$parent.onlyContent
        }
    },
    computed: {
        positives(){
            return this.ratings.filter((rating)=>{
                return rating.rateType === POSITIVE
            })
        },
        negatives(){
            return this.ratings.filter((rating)=>{
                return rating.rateType === NEGATIVE
            })
        },
    },
    mounted() {
    },
}
</script>
<style lang="stylus" scoped>
@import '../../common/stylus/base.styl'
@import '../../common/stylus/mixin.styl'
@import '../../common/fonts/icon.css'
    .ratingselect
        width 100%
        .rating-type
            padding 18px 0
            margin 0 18px
            border-bottom 1px solid rgba(7,17,27,0.1)
            .block 
                display inline-block
                padding 8px 12px
                border-radius 2px
                font-size 12px
                line-height 16px
                margin-right 8px
                color rgb(77,85,93)
                &:last-child
                    margin-right 0
                &.positive
                    //color rgb(255,255,255)
                    background-color rgba(0,160,220,0.2)
                    &.active
                        background-color rgb(0,160,220)
                &.negative
                    background-color rgba(77,85,93,0.2)
                    &.active
                        background rgb(77,85,93)
                &.active
                    color #fff
                .count
                    margin-left 2px
                    font-size 8px
        .switch
            padding 12px 18px
            line-height 24px
            font-size 12px
            border-bottom 0.5px solid rgba(7,17,27,0.1)
            color  rgb(177,153,159)
            font-size 0
            &.on
                .icon-check_circle
                    color #00c850
            .icon-check_circle
                font-size 24px
                margin-right 4px
                display inline-block
                vertical-align top
            .content
                font-size 12px




</style>
